<template>
  <div>
    <canvas id="testcanvas" width="640" height="480"></canvas>
    <audio src="/music/music.mp3" controls></audio>
  </div>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref } from "@vue/runtime-core";

export default defineComponent({
  name: "Home",
  setup() {
    onMounted(() => {
      pageLoaded();
    });

    function pageLoaded() {
      let canvas = document.getElementById("testcanvas");
      var context: CanvasRenderingContext2D = canvas.getContext("2d");
      context.fillRect(200, 10, 100, 100);
      context.fillRect(50, 70, 90, 30);

      context.strokeRect(110, 10, 50, 50);
      context.strokeRect(30, 10, 50, 50);

      context.clearRect(210, 20, 30, 20);
      context.clearRect(260, 20, 30, 20);

      //填充三角形
      context.beginPath();
      context.moveTo(10, 120);
      context.lineTo(10, 180);
      context.lineTo(110, 150);
      context.fill();

      context.beginPath();
      context.moveTo(140, 160);
      context.lineTo(140, 220);
      context.lineTo(40, 190);
      context.closePath();
      context.stroke();

      context.beginPath();
      context.moveTo(160, 160);
      context.lineTo(170, 220);
      context.lineTo(240, 210);
      context.lineTo(260, 170);
      context.lineTo(190, 140);
      context.closePath();
      context.stroke();

      context.beginPath();
      context.arc(100, 300, 40, 0, Math.PI, true);
      context.stroke();

      context.beginPath();
      context.arc(100, 300, 30, 0, 2 * Math.PI, true);
      context.stroke();

      context.beginPath();
      context.arc(200, 300, 25, (3 / 2) * Math.PI, true);
      context.stroke();

      context.fillText("写一些文本", 330, 40);
      context.font = "10 pt Arial";
      context.fillText("写一些文本 10 pt Arial", 330, 60);

      context.font = "30 pt Arial";
      context.strokeText("写一些文本 30 pt Arial", 330, 80);

      // hex  rgb
      context.fillStyle = "red";
      context.fillRect(310, 160, 100, 50);

      context.fillStyle = "green";
      context.strokeRect(310, 240, 100, 50);

      context.fillStyle = "rgb(255,0,0)";
      context.strokeRect(420, 160, 100, 50);

      context.fillStyle = "rgba(0,255,0,0.6)";
      context.fillRect(450, 180, 100, 50);

      let image = new Image();
      image.src = "/img/spaceship.png";
      image.onload = () => {
        // console.log(image)
        context.drawImage(image, 0, 350);
        context.drawImage(image, 0, 400, 100, 25);
        context.drawImage(image, 0, 0, 60, 50, 0, 420, 60, 50);
        context.save();
        context.translate(250, 370);
        context.rotate(Math.PI / 3);
        context.drawImage(image, 0, 0, 60, 50, -30, -25, 60, 50);
        context.rotate(-Math.PI / 3);
        context.translate(-240, -370);
        context.restore();
      };
    }
    return {};
  },
});
</script>

<style scoped>
#testcanvas {
  border: 1px solid #000;
}
</style>
